<template>
  <div class="swiper">
    <swiper :options="swiperOption">
      <swiper-slide class="listImgs" v-for="(l,li) in list" :key="li">
        <router-link class="li" to="">
          <img :src="l.pictureUrl" alt />
          <div class="infos">
            <p class="title">{{l.chineseName}}</p>
            <!-- <p class="desc">{{l.desc}}</p> -->
            <p class="price">
              <span class="nowPrice">&yen;{{l.salePriceWithTax|formatMoney}}</span>
              <span class="oldPrice">原价&yen;{{l.marketPrice|formatMoney}}</span>
            </p>
          </div>
        </router-link>
      </swiper-slide>
      <!-- 分页器 -->
      <div class="swiper-pagination" slot="pagination"></div>
      <!-- 左右箭头 -->
    </swiper>
    <div class="swiper-button-prev btns" slot="button-prev">
      <img src="/static/images/left-arrow.svg" alt />
    </div>
    <div class="swiper-button-next btns" slot="button-next">
      <img src="/static/images/right-arrow.svg" alt />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      swiperOption: {
        //显示分页
        pagination: {
          el: ".swiper-pagination"
        },
        //设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        //开启循环模式
        loop: true,
        slidesPerView: 5
      }
    };
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.swiper {
  position: relative;
  padding: 0 80px;
  .swiper-slide {
    width: 1050px;
    margin: 20px auto 0;
    padding: 18px 0;
    /deep/ .van-swipe-item {
      text-align: center;
    }
    .li {
      width: 210px;
      display: block;
      img {
        display: block;
        width: 150px;
        height: 150px;
        margin: 0 auto;
      }
    }
  }
  .swiper-button-prev,
  .swiper-button-next {
    width: 30px;
    height: 30px;
    outline: none;
    img {
      width: 100%;
      height: 100%;
    }
    &::after {
      display: none;
    }
    &.swiper-button-prev {
      left: 24px;
    }
    &.swiper-button-next {
      right: 24px;
    }
  }
  &.kelly-btn {
    padding: 0 10px;
    position: relative;
    .btns {
      width: 30px;
      height: 120px;
      line-height: 120px;
      background: #ab0032;
      border-radius: 15px;
      color: #fff;
      font-size: 20px;
      text-align: center;
      top: 110px;
      outline: none;
      position: absolute;
      img {
        display: none;
      }
      &::before {
        content: " ";
        width: 10px;
        height: 10px;
        transform: rotate(135deg);
      }
      &.swiper-button-prev {
        left: -16px;
        &::before {
          margin-left: 6px;
          border-right: 2px solid #fff;
          border-bottom: 2px solid #fff;
        }
      }
      &.swiper-button-next {
        right: -16px;
        &::before {
          margin-right: 6px;
          border-left: 2px solid #fff;
          border-top: 2px solid #fff;
        }
      }
    }
  }
}
.infos{
  padding: 0 8px;
  .title{
    font-size: 16px;
    margin: 12px 8px;
    line-height: 22px;
  }
  .price{
    margin: 10px 0;
    .nowPrice{   
      font-size: 16px;
      margin-right: 20px;
      color: #AB0032;
    }
    .oldPrice{      
      font-size: 12px;
      color: #9fa9ba;
      text-decoration: line-through;
    }
  }
}
p{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a{  
  text-decoration: none;
    color: #212529;
}
</style>